<template>
  <VueDraggable
    v-model="list"
    :group="{ name: DraggableGroup, pull: 'clone', put: false }"
    :clone="deepClone"
    @change="changeList"
  >
    <div v-for="nodeItem in list" :key="nodeItem.id">
      <div class="tree_item" @click="handleClick(nodeItem)">
        <slot :node="nodeItem">
          <span>{{ nodeItem.label }}</span>
        </slot>
      </div>
    </div>
  </VueDraggable>
</template>

<script setup lang="ts" name="DraggableTree">
import { DraggableGroup, deepClone } from "../../uitls";
import { PropType, ref, watchEffect } from "vue";
import { VueDraggable } from "vue-draggable-plus";
import { DraggableTreeNode } from "../../type";
const props = defineProps({
  nodes: {
    type: Array as PropType<Array<DraggableTreeNode>>,
    default: () => [],
  },
});
const emit = defineEmits(["update:nodes"]);
const chooseNodeId = ref("");
const list = ref<DraggableTreeNode[]>([]);
watchEffect(() => {
  list.value = props.nodes;
});
const changeList = () => {
  emit("update:nodes", list.value);
};
function handleClick(node: DraggableTreeNode) {
  chooseNodeId.value = node.id;
}
</script>

<style lang="scss" scoped>
.tree_item {
  display: flex;
  align-items: center;
  cursor: pointer;
  padding: 0 10px;
  &:hover {
    background-color: #f5f7fa;
  }
  .icon {
    font-size: 10px;
    margin-right: 10px;
  }
  .collapse {
    transform: rotate(-90deg);
  }
}
.child_tree {
  padding-left: 50px;
}
</style>
